<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
<%-- 张颢铧 改于7月24日 15点 原因：动态改变menuFrame大小 --%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" href="css/common.css" type="text/css" />
		<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" language="javascript">
		$(document).ready(function () {	
			$('#ImgArrow').toggle(
				function(){
					$(this).attr("src","../images/switch_right.gif"); 
					//$('#menuFrame',window.top.frames['mainFrameSet']).hide("slow");
					parent.mainFrameSet.cols="0,6,*";
					//$('#menuFrame',window.top.frames['mainFrameSet']).attr("cols","0,6,*"); 
				},
				function(){
					parent.mainFrameSet.cols="175,6,*";
					$(this).attr("src","../images/switch_left.gif"); 
					//$('#tdIframe').show("slow"); 
				}
			);
		});
		</script>
		
<script>
//step为框架尺寸改变的速度步长
//flag为判断当前状态是显示(1)还是隐藏(-1)
var obj,w,step=3,flag=-1;         
function showHideFrame(b){
		
       obj=parent.frames['mainFrameSet'];        //目标框架对象
       
      // alert(b);      
       w=parseInt(obj.cols.split(",")[0]);      
/*目标框架对象的当前宽度，本例中obj.cols取得的值为"100,*"(显示状态时为"0,*")，obj.cols.split(",")把 obj.cols以","为标志分组，得到数组["100","*"]，obj.cols.split(",")[0]取到数组的第一个元素100，然后用parseInt(obj.cols.split(",")[0])转化为整数*/
       flag=b;                //根据参数值b，设置显示隐藏状态
       resize();                //调用resize()函数
}
function resize(){
//调整目标框架对象宽度值，如果flag为1即显示框架时w不断变大，
//反之不断变小
		
       w += step*flag;
       if((flag==-1&&w>190)||(flag==1&&w<400)){
//隐藏状态并且w大于0或者显示状态并且w<100，执行下面的代码
		//alert(w);
          obj.cols=w+",6,*";                 //重设框架宽度
           //setTimeout("resize()",10); //10毫秒后再次执行resize()函数
       }
}
</script> 
	</head>
	<body>
		<div id="switchpic">
			<img src="../images/switch_right.gif" id="ImgArrow1" style="float:left" onmouseover="showHideFrame(1)"/>
			<div style="height:90px;"></div>
			<img src="../images/switch_left.gif" id="ImgArrow" style="float:left" />
			<div style="height:90px;"></div>
			<img src="../images/switch_left.gif" id="ImgArrow3" onmouseover="showHideFrame(-1)"/>
		</div>
	</body>
</html>